<template>
  <div id="menhu-main">
    <Row type="flex">
      <i-col>
        <p>我们的产品</p>
      </i-col>
    </Row>
    <Row type="flex" gutter="16">
      <i-col span="6">
        <Card style="background-color: #E67E22">
          <p slot="title" style="background-color: #D35400;">知识库</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
        </Card>
      </i-col>
      <i-col span="10">
        <Card style="background-color: #34495E">
          <p slot="title" style="background-color: #2C3E50">量化工具</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
        </Card>
      </i-col>
      <i-col span="8">
        <Card style="background-color: #3498DB">
          <p slot="title" style="background-color: #2980B9">通知公告</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
        </Card>
      </i-col>
    </Row>
    <Row type="flex" gutter="16">
      <i-col span="7">
        <Card style="background-color: #1ABC9C">
          <p slot="title" style="background-color: #16A085">留言板</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
        </Card>
      </i-col>
      <i-col span="6">
        <Card style="background-color: #E74C3C">
          <p slot="title" style="background-color: #C0392B">量化课堂</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
        </Card>
      </i-col>
      <i-col span="11">
        <Card style="background-color: #9B59B6">
          <p slot="title" style="background-color: #8E44AD">工具</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
          <p>卡片内容</p>
        </Card>
      </i-col>
    </Row>

  </div>

</template>
<script>
  export default{}
</script>
<style scoped>
  div#menhu-main {
    width: 100%;
    padding: 0 5rem;
  }
</style>
